<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-select v-model="nameType" placeholder="选择生成类型" style="width: 100%">
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row class="top10px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-input
            placeholder="自定义开头"
            v-model="firstWords"
            clearable>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row class="top10px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-input
            placeholder="自定义结尾"
            v-model="lastWords"
            clearable>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-divider content-position="left">生成数量</el-divider>
          <el-input-number v-model="number" :min="1" :max="100" label="生成数量"  style="width: 100%"></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-divider content-position="left">名字长度</el-divider>
          <el-input-number v-model="length" v-bind:disabled="nameType == 5 || nameType == 6 || nameType == 11" :min="1" :max="5" label="名字长度"  style="width: 100%"></el-input-number>
        </div>
      </el-col>
    </el-row>

    <el-row class="top10px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-button @click="getTags" style="width: 100%">开始生成</el-button>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-tag v-for="v,i in tags" v-bind:key="i" :type="getTagType()" v-clipboard:copy="v.name">{{v.name}}</el-tag>
        </div>
      </el-col>
    </el-row>
    <el-row v-show="false">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <iframe frameborder=0 name="showHere" scrolling=auto src="http://chuangshi.qq.com/bk/qh/AGoEMF1gVjMAPlRtATMBZw-r-111.html"></iframe>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>



export default {
  name: 'Index',
  data () {
    return {
      nameType:1,
      number:10,
      length:1,
      firstWords:"",
      lastWords:"",

      options: [{
        label: '天朝单姓',
        options: [{
          value: 1,
          label: '天朝单姓(男)'
        }, {
          value: 2,
          label: '天朝单姓(女)'
        }]
      },{
        label: '天朝复姓',
        options: [{
          value: 3,
          label: '天朝复姓(男)'
        }, {
          value: 4,
          label: '天朝复姓(女)'
        }]
      },{
        label: '西方姓氏',
        options: [{
          value: 5,
          label: '西方姓氏(男)'
        }, {
          value: 6,
          label: '西方姓氏(女)'
        }]
      },{
        label: '日本姓氏',
        options: [{
          value: 7,
          label: '日本姓氏(男)'
        }, {
          value: 8,
          label: '日本姓氏(女)'
        }]
      },{
        label: '其他',
        options: [{
          value: 9,
          label: '地名'
        }, {
          value: 10,
          label: '组织'
        }, {
          value: 11,
          label: '天材地宝'
        }]
      }],
      tags:[],
      typs:["","success","info","warning","danger"]
    }
  },
  methods:{
    getTagType(){
      let r = Math.random()*5
      let index = Math.round(r)
      console.log(index)
      return this.typs[index]
    },
    getTags(){
      let that = this
      this.tags = []
      let params = {
        nameType:this.nameType,
        number:this.number,
        length:this.length,
        firstWords:this.firstWords,
        lastWords:this.lastWords
      }
      let url = "/api"
      this.axios.get(url, {
        params: params
      }).then(function (response) {
        if(response.status == 200){
          that.tags = response.data
        }else{
          alert("工厂爆炸了，生产不了了！！！")
        }
      }).catch(function (error) {
        alert("不小心捅破了服务器！！！")
        console.log(error);
      });
    }
  }
}
</script>

<style scoped>
  .top10px{
    margin-top: 10px;
  }
  .el-tag{
    margin-right: 5px;
    margin-bottom: 5px;
  }
</style>
